<template>
	<div class="afterSale">
		<el-form :inline="true" :model="formData" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="formData.mobile" placeholder="手机号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="formData.orderNo" placeholder="订单号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="formData.saleNo" placeholder="售后单号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="formData.status" placeholder="订单状态" clearable>
					<el-option label="处理中" value="0"></el-option>
					<el-option label="审核通过" value="1"></el-option>
					<el-option label="审核拒绝" value="2"></el-option>
					<el-option label="确认收货" value="3"></el-option>
					<el-option label="退款成功" value="9"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="formData.type" placeholder="售后单类型" clearable>
					<el-option label="仅退款" value="1"></el-option>
					<el-option label="退款退货" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
				 end-placeholder="结束日期" style="width: 400px;">
				</el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索 </el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" style="width: 100%" border>
			<el-table-column prop="userId" label="会员ID" align="center" width="120"></el-table-column>
			<el-table-column prop="orderProductName" label="商品名称" align="center" width="120"></el-table-column>
			<el-table-column prop="afterSaleAmount" label="商品名称" align="center" width="120">
				<template slot-scope="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.orderProductImgUrl" :preview-src-list="[scope.row.orderProductImgUrl]">
						<div slot="error" class="image-slot">
							暂无图片
						</div>
					</el-image>
				</template>
			</el-table-column>
			 <el-table-column prop="actualPayGoldenBean" label="实际支付金豆" align="center" width="120"></el-table-column>
			<el-table-column prop="afterSaleAmount" label="申请退款金额" align="center" width="120"></el-table-column>
			<el-table-column prop="goldenBeanRefund" label="退款金豆数量" align="center" width="120"></el-table-column>
			<el-table-column prop="sweetRefund" label="申请退款糖果" align="center" width="120"></el-table-column>
			<el-table-column prop="afterSaleType" label="售后类型" align="center" width="120">
				<template slot-scope="scope">
					<span>{{scope.row.afterSaleType==1?'仅退款':'退款退货'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="售后单状态" align="center" width="140">
				<template slot-scope="scope">
					<!-- <span>{{scope.row.status==0?'处理中':scope.row.status==1?'审核通过':scope.row.status==2?'审核拒绝':scope.row.status==3?'确认收货':'退款成功'}}</span> -->
					<span>{{statusList[scope.row.status]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="afterSaleDescription" label="售后描述" align="center" width="100"></el-table-column>
			<el-table-column prop="mobile" label="手机号" align="center" width="120"></el-table-column>
			<el-table-column prop="orderNo" label="订单号" align="center" width="260"></el-table-column>
			<el-table-column prop="orderType" label="订单类型" align="center" width="140">
			  <template slot-scope="scope">
			    <span>{{ORDERTYPE[scope.row.orderType]}}</span>
			  </template>
			</el-table-column>
			<el-table-column prop="saleNo" label="售后单号" align="center" width="260"></el-table-column>
			<el-table-column prop="courierName" label="退货物流公司" align="center" width="120"></el-table-column>
			<el-table-column prop="courierNo" label="退货物流单号" align="center" width="160"></el-table-column>
			<el-table-column prop="refundId" label="退款后生成的交易编号" align="center" width="180"></el-table-column>
			<el-table-column prop="refundMsg" label="退款返回的消息" align="center" width="130"></el-table-column>
			<el-table-column prop="rejectReason" label="拒绝退款申请原因" align="center" width="160" show-overflow-tooltip></el-table-column>
			<el-table-column prop="timeApplication" label="申请售后时间" align="center" width="170"></el-table-column>
			<el-table-column prop="timeConfirm" label="退货时商家确认收到退还货物时间" align="center" width="170"></el-table-column>
			<el-table-column prop="timeCourier" label="退货时客户退货时间" align="center" width="170"></el-table-column>
			<el-table-column prop="timeOperation" label="处理售后时间" align="center" width="170"></el-table-column>
			<el-table-column prop="createDate" label="创建时间" align="center" width="170"></el-table-column>
			<el-table-column prop="lastModifyDate" label="修改时间" align="center" width="170"></el-table-column>
			<el-table-column label="操作" width="240" fixed="right" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="viewAfterSalDetail(scope.row)">详情</el-button>
					<el-button v-if="scope.row.status == 0" type="primary" size="mini" @click="review(scope.row)">审核</el-button>
					<el-button v-if="scope.row.status == 3" type="primary" size="mini" @click="Receipt(scope.row)">确认收货</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pages">
			<el-pagination :page-size="formData.size" :current-page="formData.page" layout="prev, pager, next,total,jumper"
			 :total="total" background @current-change="handleCurrentChange">
			</el-pagination>
		</div>

		<el-dialog title="审核" :visible.sync="reviewVisible" width="40%">
			<el-form :model="reviewData" label-width="80px" ref="reviewData">
				<el-form-item label="状态" prop="status">
					<el-select v-model="reviewData.status" placeholder="请选择审核状态" style="width: 100%;">
						<el-option label="审核通过" :value="1"></el-option>
						<el-option label="审核不通过" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="rejectReason" v-show="reviewData.status==2">
					<el-input type="textarea" v-model="reviewData.rejectReason" placeholder="请输入审核不通过原因" :rows="6"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="receiptSubmit">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="售后订单详情" :visible.sync="detailDialog" width="100%">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>基础信息</span>
				</div>
				<el-row>
					<el-col :span="8" class="mb20">
						<span>商品名称：</span>
						<span>{{saleOrderData.orderProductName || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>订单号：</span>
						<span>{{saleOrderData.orderNo || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
					  <span>订单类型：</span>
					  <span>{{ORDERTYPE[saleOrderData.orderType]}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>售后单号：</span>
						<span>{{saleOrderData.saleNo || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>售后单状态：</span>
						<span>{{statusList[saleOrderData.status]}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>手机号：</span>
						<span>{{saleOrderData.mobile || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>实际支付金豆：</span>
						<span>{{saleOrderData.actualPayGoldenBean || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>退款金豆数量：</span>
						<span>{{saleOrderData.goldenBeanRefund || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>申请退款金额：</span>
						<span>{{saleOrderData.afterSaleAmount || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>申请退款糖果：</span>
						<span>{{saleOrderData.sweetRefund || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>售后类型：</span>
						<span v-if="saleOrderData.afterSaleType == 1">仅退款</span>
						<span v-if="saleOrderData.afterSaleType == 2">退款退货</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>售后描述：</span>
						<span>{{saleOrderData.afterSaleDescription || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20" v-if="saleOrderData.rejectReason">
						<span>拒绝退款申请原因：</span>
						<span>{{saleOrderData.rejectReason}}</span>
					</el-col>
					<el-col :span="8" class="mb20" v-if="saleOrderData.refundId">
						<span>交易编号：</span>
						<span>{{saleOrderData.refundId}}</span>
					</el-col>
					<el-col :span="8" class="mb20" v-if="saleOrderData.courierName">
						<span>退货物流公司：</span>
						<span>{{saleOrderData.courierName}}</span>
					</el-col>
					<el-col :span="8" class="mb20" v-if="saleOrderData.courierNo">
						<span>退货物流单号：</span>
						<span>{{saleOrderData.courierNo}}</span>
						<el-button style="margin-left: 15px;" type="text" v-show="saleOrderData.courierNo" @click="viewwuliu" v-hasPermi="['admin:order:logistics']">查看物流</el-button>
					</el-col>

					<el-col :span="8" class="mb20">
						<span>申请售后时间：</span>
						<span>{{saleOrderData.timeApplication || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20" v-if="saleOrderData.timeOperation">
						<span>处理售后时间：</span>
						<span>{{saleOrderData.timeOperation}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>店铺id：</span>
						<span>{{saleOrderData.merchantId || '暂无'}}</span>
					</el-col>
					<el-col :span="8" class="mb20">
						<span>会员id：</span>
						<span>{{saleOrderData.userId || '暂无'}}</span>
					</el-col>
				</el-row>
			</el-card>
			<el-card class="box-card" v-if="saleOrderData.url && saleOrderData.url.length > 0">
				<div slot="header" class="clearfix">
					<span>图片信息</span>
				</div>
				<el-image style="width: 100px; height: 100px" :src="saleOrderData.url&&saleOrderData.url.length>0?saleOrderData.url[0]:''" :preview-src-list="saleOrderData.url">
					<div slot="error" class="image-slot">
					    暂无图片
					</div>
				</el-image>
			</el-card>
		</el-dialog>

		<el-dialog title="物流详情" :visible.sync="wuliuVisible" width="45%">
			<el-timeline :reverse="reverse">
				<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
					{{activity.status}}
				</el-timeline-item>
			</el-timeline>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					mobile: '',
					orderNo: '',
					saleNo: '',
					status: '',
					type: '',
					startDate: '',
					endDate: '',
					size: 10,
					page: 1
				},
				total: 0,
				date: [this.getNowTime(), this.getNowTime()],
				tableData: [],

				reviewVisible: false,
				reviewData: {
					"id": '',
					"rejectReason": "",
					"status": ""
				},
				statusList: {
					0: "处理中",
					1: "审核通过",
					2: "审核拒绝",
					3: "退款退货中用户已邮寄, 待卖家确认收货",
					9: "退款成功",
					4: "退款处理中",
					5: "退款失败"
				},
				ORDERTYPE: {
				  0: '普通订单',
				  1: '秒杀订单',
				  2: '虚拟商品订单',
				  3: '红包拼团订单',
				  4: '免单',
				  5: '金豆订单'
				},
				detailDialog: false,
				saleOrderData: {},

				wuliuVisible: false,
				reverse: false,
				activities: []
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			//默认当天时间
			getNowTime() {
				let now = new Date();
				let year = now.getFullYear(); //得到年份
				let month = now.getMonth(); //得到月份
				let date = now.getDate(); //得到日期
				month = month + 1;
				month = month.toString().padStart(2, "0");
				date = date.toString().padStart(2, "0");
				let defaultDate = `${year}-${month}-${date}`;
				return defaultDate;
			},
			getData() {
				this.formData.startDate = this.date != null ? this.date[0] : '';
				this.formData.endDate = this.date != null ? this.date[1] : '';
				this.formData.merchantId = localStorage.getItem('merchantId');
				this.$http.get(this.$api.afterSaleList, this.formData).then(res => {
					this.tableData = res.data;
					this.total = res.extraInfo;
				})
			},
			onSearch() {
				this.formData.page = 1;
				this.getData();
			},
			handleCurrentChange(val) {
				this.formData.page = val;
				this.getData();
			},
			review(row) {
				this.reviewData = {
					"id": row.id,
					"rejectReason": "",
					"status": ""
				}
				this.reviewVisible = true;
			},
			receiptSubmit() {
				const loading = this.$loading({
					lock: true,
					text: '审核中，客官请稍等。。。',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.post(this.$api.afterSaleRefund, this.reviewData).then(res => {
					loading.close();
					if (res.code == 0) {
						this.reviewVisible = false;
						this.getData()
						this.$message({
							message: '审核成功！',
							type: 'success'
						});
					} else {
						this.$message.error('审核失败,' + res.msg);
					}

				})
			},
			Receipt(row) {
				this.reviewData = {
					"id": row.id,
					"rejectReason": "",
					"status": 3
				}
				this.$confirm('请确认是否已经收到货物, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '审核中，客官请稍等。。。',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$http.post(this.$api.afterSaleRefund, this.reviewData).then(res => {
						loading.close();
						if (res.code == 0) {
							this.reviewVisible = false;
							this.getData()
							this.$message({
								message: '确认成功！',
								type: 'success'
							});
						} else {
							this.$message.error('确认失败,' + res.msg);
						}

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			//查询售后订单详情
			viewAfterSalDetail(row) {
				this.$http.get(this.$api.afterSaleDetail, {
					orderAfterSaleId: row.id
				}).then(res => {
					if (res.code == 0) {
						this.detailDialog = true;
						this.saleOrderData = res.data
					}
				})
			},
			//查询物流
			viewwuliu() {
				console.log(this.saleOrderData);
				this.$http.get(this.$api.mallOrderLogistics, {
					mobile: this.saleOrderData.mobile,
					number: this.saleOrderData.courierNo
				}).then(res => {
					this.wuliuVisible = true;
					let data = JSON.parse(res.data);
					this.activities = data.data.list;
				})
			}
		}
	}
</script>

<style scoped>
	.afterSale {
		padding: 15px;
	}

	.pages {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30px;
	}

	.mb20 {
		height: 40px;
		line-height: 40px;
	}
	.afterSale>>>.el-image-viewer__close{
		color: white;
	}
</style>
